<script setup>
    import { onMounted, ref } from 'vue'
    const systemMode = ref([{
        label: '日间模式',
        value: 'normal'
    },{
        label: '夜间模式',
        value: 'dark'
    }]) 

    let currentSystemMode = ref(localStorage.getItem('systemMode') || 'normal')

    const changeSystemMode = (val) => {
        if(val == currentSystemMode.value) return
        localStorage.setItem('systemMode',val)
        currentSystemMode.value = val
        changeBodyClass()
    }

    const changeBodyClass = () => {
        console.log('xxxxx', currentSystemMode.value)
        if(currentSystemMode.value == 'dark') {
            document.body.classList.add('darkmode')
        } else {
            document.body.classList.remove('darkmode')
        }
    }
    onMounted (() => {
        changeBodyClass()
    })
</script>

<template>
    <div class="header">
        <div class="leftArea">导航部分</div>
        <div class="rightArea">
            <el-dropdown @command="changeSystemMode">
                <span class="dropBox el-dropdown-link">
                    <el-icon v-if="currentSystemMode == 'normal' " color="#409efc" :size="20" class="no-inherit">
                        <Sunny />
                    </el-icon>
                    <el-icon v-else color="#fff" :size="20" class="no-inherit">
                        <MoonNight />
                    </el-icon>
                    {{ currentSystemMode == 'normal' ? '日间模式' : '夜间模式' }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                    </span>
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item class="dropItem" :command="item.value" v-for="(item,index) of systemMode" :key="index">
                            <el-icon color="#409efc" :size="16" class="no-inherit">
                                <Sunny v-if="item.value == 'normal'" />
                                <MoonNight v-else />
                            </el-icon>
                            {{ item.label }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style scoped>
    .header {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        height: 60px;
        box-shadow: var(--header-boxshadow);
        transition: all .4s, width 0s, height 0s;
    }

    .dropBox,
    .dropItem {
        display: flex;
        align-items: center;
        gap: 4px;
        outline: none;
    }
</style>